<template>
  <div>
    <el-image :src="LOGO" alt="LOGO" style="border-radius: 5px;height: 100px;margin-left: 25%;margin-top: 10%"/>
    <el-divider style="width: 90%;margin-left: 5%"/>
    <!-- 进行用户头像和名称的显示 -->
    <div>
      <div class="img_user">
        <img :src="showUser.headImg" alt="">
      </div>
      <h3 class="fontName">{{ showUser.defaultUserName }}</h3>
    </div>
    <!-- 跳转学习和笔记页面？暂定功能 -->
    <div>
      <el-row align="top" >
        <el-button class="minRouter" round="round" @click="router.replace({name:'home'})">
          <el-icon><HomeFilled /></el-icon>Home
        </el-button>
        <el-button class="minRouter" round="round" @click="router.replace({name:'note'})">
          <el-icon><Edit /></el-icon>Note
        </el-button>
        <el-button class="minRouter" round="round" @click="router.replace({name:'learn'})">
          <el-icon><Collection /></el-icon>Learn
        </el-button>
        <el-button class="minRouter" round="round" @click="router.replace({name:'my'})">
          <el-icon><User /></el-icon>Person
        </el-button>
        <el-button class="minRouter" disabled round="round">
          <el-icon><MoreFilled /></el-icon>
        </el-button>
      </el-row>
    </div>

  </div>
</template>

<script setup>
import {GetUserNameAndImgHead, Login} from "@/api";
import {onMounted, reactive, ref} from "vue";
import {Collection, Edit, HomeFilled, MoreFilled, User} from "@element-plus/icons-vue";
import router from "@/router";
import logo from '@/assets/img/LOGO/logo_transparent.png'
import {loginStatusStore} from "@/stores/counter";

// LOGO图片加载
const LOGO = logo
// 登录状态
const store = loginStatusStore()
// 用户储存在浏览器中的用户信息
let username = sessionStorage.getItem("username")
let password = sessionStorage.getItem("password")
let phone = sessionStorage.getItem("phone")
let email = sessionStorage.getItem("email")
let user = {username, password, phone, email}

let defaultUserName = '默认名称'
let headImg = 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'
const showUser = reactive({defaultUserName, headImg})

// 使用短轮询进行用户登录状态的更新
const pollingTimer = ref(null)
const poll = () => {
  Login(user).then((msg) => {
        const token = msg.data.data
        window.localStorage.setItem("token", 'Bearer\xa0' + token)
        store.logStatus = 1
        console.log(store.logStatus)
        console.log("已经刷新登录信息")
  })
  .catch(error => {console.log(error);});
  // 递归调用自己以持续轮询
  pollingTimer.value = setTimeout(() => {
    poll()
  }, 600000);
}
const startPolling = () => { if(!pollingTimer.value) {poll();} }
const stopPolling = () => { if(!pollingTimer.value) { clearnTimeout(pollingTimer.value); pollingTimer.value=null} }

onMounted(() => {
  // 轮询自启动
  console.log("开始轮询");
  if(window.localStorage.getItem('token')) { getUserNameAndImgHead(); }
  startPolling()
})
// 监视用户当页面销毁的时候 清除轮询
window.addEventListener('beforeunload', (event) => { stopPolling(); event.preventDefault; console.log("结束轮询"); })

function getUserNameAndImgHead() {
  GetUserNameAndImgHead().then((res) => {
    showUser.defaultUserName = res.data.data.userName
    showUser.headImg = res.data.data.imgUrlIcon
  })
  .catch((error) => {
    console.log(error);
  })
}


</script>

<style scoped>
.img_user{
  width: 60%;
  margin-left: 20%;
}
.fontName{
  width: 50%;
  margin-left: 25%;
}
.minRouter{
  width: 90%;
  margin: 5% 5% 0;
}
</style>
